<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>电商网页制作</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- videobox bigan -->
<div class="videobox">
 	<header>
 		<div class="con">
 			<section class="left"></section>
 			<section class="right">
 				<a href="#">登录</a>
 				<a href="#">注册</a>
 			</section>
 		</div>
 	</header>
 	<nav>
 		<ul>
 			<li class="left">
 				<a class="one" href="#">
 					<img src="images/sanxian.png" alt="">
 					<span>选项</span>
 					<img src="images/sanjiao.png" alt="">
 				</a>
 				<aside>
 					<span></span>
 					<ol class="zuo">
 						<li class="con">护肤</li>
 						<li>>洁面</li>
 						<li>>爽肤水</li>
 						<li>>精华</li>
 						<li>>乳液</li>
 						<li class="con">彩妆</li>
 						<li>>BB霜</li>
 						<li>>卸妆</li>
 						<li>>粉底液</li>
 						<li class="con">香氛</li>
 						<li>>女士香水</li>
 						<li>>男士香水</li>
 						<li>>中性香水</li>					
 					</ol>
 					<ol class="you">
 						<li class="con">男士专区</li>
 						<li>>爽肤水</li>
 						<li>>洁面</li>
 						<li>>面霜</li>
 						<li>>精华</li>
 						<li class="con">热门搜索</li>
 						<li>>洗面奶</li>
 						<li>>去黑头</li>
 						<li>>隔离</li>
 						<li>>面膜</li>						
 					</ol>
 					<img src="images/tu1.jpg" alt="">
 				</aside>
 			</li>
 			<li class="center">
 				<form>
 				<input type="text" value="请输入商品名称、品牌或编号">
 				</form>
 			</li>
 			<li class="right">
 				<a href="#">&#xe65e;</a>
 				<a href="#">&#xe608;</a>
 				<a href="#">&#xf012a;</a>
 				<a href="#">&#xe68e;</a>
 			</li>
 		</ul>
 	</nav>
 	<video src="video/home_loop_720p.mp4" autoplay="ture" loop="ture" ></video>
 	<audio src="audio/home.ogg" autoplay="ture" loop="ture"></audio>
 	<div class="pic">
 		<p>Select the right resolution for your PC and dive in! （请为您的电脑选择正确的分辨率）</p>
 		<ul>
 			<li class="one"><span>&#xe662;</span>STANDARD标准</li>
 			<li class="two"><span>&#xe662;</span>HD高清</li>
 		</ul>
 	</div>
 </div>
<!-- videobox end -->
<!-- new bigan -->
<div class="new">
 	<header>
 		<img src="images/new.jpg" alt="">
 	</header>
 	<p>补水保湿 提亮肤色 低敏配方 收缩毛孔 滋养容颜</p>
 	<ul>
 		<li>
 			<hgroup>
 				<h2>fresh skin 薏仁水</h2>
 				<h2>化妆水/爽肤水单品</h2>
 				<h2></h2>
 				<h2></h2>
 			</hgroup>
 		</li>
 		<li>
 			<hgroup>
 				<h2>蜂蜜原液天然滋养</h2>
 				<h2>美白护肤套装</h2>
 				<h2></h2>
 				<h2></h2>
 			</hgroup>
 		</li>
 		<li>
 			<hgroup>
 				<h2>纯情诱惑一抹惊艳</h2>
 				<h2>告别暗淡唇</h2>
 				<h2></h2>
 				<h2></h2>
 			</hgroup>
 		</li>
 	</ul>
 </div>
<!-- new end -->
<!-- try bigan -->
<div class="try">
	<header>
		<img src="images/shizhuang.jpg" alt="">
	</header>
	<p>美化容貌 增添自信 突出个性 </p>
	<ul>
		<li>
			<img class="zheng" src="images/try1.jpg" alt="">
			<img class="fan" src="images/try4.jpg" alt="">
		</li>
		<li>
			<img class="zheng" src="images/try2.jpg" alt="">
			<img class="fan" src="images/try5.jpg" alt="">
		</li>
		<li>
			<img class="zheng" src="images/try3.jpg" alt="">
			<img class="fan" src="images/try6.jpg" alt="">
		</li>
	</ul>
</div>
<!-- try end -->
<!-- text bigan -->
<div class="text">
	<header>
		<img src="images/cp.jpg" alt="">
	</header>
	<p>评测 我们更专业 用户更放心</p>
	<ul>
		<li>
			<img  class="tu" src="images/cp1.jpg" alt="">
			<img class="tihuan" src="images/th1.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp2.jpg" alt="">
			<img class="tihuan" src="images/th2.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp3.jpg" alt="">
			<img class="tihuan" src="images/th3.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp4.jpg" alt="">
			<img class="tihuan" src="images/th4.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp5.jpg" alt="">
			<img class="tihuan" src="images/th5.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp6.jpg" alt="">
			<img class="tihuan" src="images/th6.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp7.jpg" alt="">
			<img class="tihuan" src="images/th7.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp8.jpg" alt="">
			<img class="tihuan" src="images/th8.png" alt="">
		</li>
	</ul>
</div>
<!-- text end -->
<footer>
	<div class="logo"></div>
	<div class="message">
		<form>
			<ul class="left">
				<li>
					<p><label for="">姓名：</label></p>
					<input type="text">
				</li>
				<li>
					<p>邮箱：</p>
					<input type="email">
				</li>
				<li>
					<p>电话：</p>
					<input type="tel" pattern="^\d{11}$" title="请输入11位数字">
				</li>
				<li>
					<p>密码：</p>
					<input type="password">
				</li>
				<li>
					<input class="but" type="submit" value="">
				</li>
			</ul>
			<div class="right">
				<p>留言：</p>
				<textarea></textarea>
			</div>
		</form>
	</div>
</footer>
 <div class="banquan">
		<a href="#">fresh skin 美肤科技有限公司</a>
	</div> 	
</body>
</html>
